/**
 * @file 大屏配置
 * @date 2020-05-15
 */

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import {ArrowLeftOutlined} from '@ant-design/icons';
import {Form} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {Card, Radio, Divider, Button, Modal, Spin} from 'antd';
import moment from 'moment';
import {getScreenDetail} from '~/service/screen';
import {PAGE_ENUM} from '~/utils/menu';
import MoneyConfig from '../MoneyConfig';
import './index.styl';

const Img = {
    1: require('~/css/img/class.png'),
    2: require('~/css/img/group.png')
};
class BigScreenConfig extends Component {
    static propTypes = {
    };

    constructor(props) {
        super(props);
        this.state = {
            data: '大屏配置',
            visible: false,
            screenType: 1,
            detail: null,
            spinLoading: false
        };
    }

    componentDidMount() {
        const {match: {params: {id}}} = this.props;
        const {search} = window.location;
        const copyId = parseInt(search.slice(8), 10) || 0;
        if (id) {
            this.screenId = parseInt(id, 10);
            this.getScreenDetail(this.screenId, 'edit');
        }
        if (copyId) {
            this.copyId = copyId;
            this.getScreenDetail(copyId, 'copy');
        }
    }

    getScreenDetail = (id, type) => {
        this.setState({
            spinLoading: true
        });
        getScreenDetail({id}).then(res => {
            if (res) {
                const {data} = res;
                const {screenType, baseType} = data;
                let detail = {};
                if (type === 'copy') {
                    let screenGroups = [];
                    if (screenType === 2) {
                        screenGroups = data.screenGroups.map(ele => {
                            ele.targetMoney = null;
                            delete ele.id;
                            return ele;
                        });
                    }
                    detail = {
                        screenGroups,
                        baseType,
                        screenType,
                        startTime: moment().add(1, 'H'),
                        endTime: moment().add(97, 'H')
                    };
                }
                else {
                    detail = data;
                }
                this.setState({
                    screenType,
                    detail,
                    spinLoading: false
                });
            }
        });
    };

    handlePrevView = () => {
        this.props.history.push(`/manage/screen/list/${PAGE_ENUM.BIG_SCREEN_CONFIG}`);
    };

    handleShowModal = () => {
        this.setState({
            visible: true
        });
    };

    handleCancel = () => {
        this.setState({
            visible: false
        });
    };

    handleScreenType = e => {
        this.setState({
            screenType: e.target.value
        });
    };


    render() {
        const {data, visible, screenType, detail, spinLoading} = this.state;
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {span: 4},
            wrapperCol: {span: 18},
        };
        return (
            <Card title={
                (
                    <p>
                        <ArrowLeftOutlined style={{marginRight: 10}} onClick={this.handlePrevView} />
                        {data}
                    </p>
                )
            }
            >
                <Spin spinning={spinLoading}>
                    <Form {...formItemLayout}>
                        <div style={{position: 'relative'}}>
                            <Form.Item label="大屏类型">
                                {getFieldDecorator('radio-group', {
                                    initialValue: screenType || 1
                                })(
                                    <Radio.Group
                                        onChange={this.handleScreenType}
                                        disabled={!!this.screenId || !!this.copyId}
                                    >
                                        <Radio value={1}>成交金额大屏</Radio>
                                        <Radio value={2}>团队&个人金额排行大屏</Radio>
                                    </Radio.Group>,
                                )}
                            </Form.Item>
                            <div style={{position: 'absolute', right: 50, top: 5}}>
                                <Button
                                    type="link" style={{color: '#000'}}
                                    onClick={this.handleShowModal}
                                >
                                    设置说明
                                </Button>
                            </div>
                            <Modal
                                visible={visible}
                                onCancel={this.handleCancel}
                                footer={false}
                                maskClosable closable={false}
                                bodyStyle={{padding: 0, height: 600}}
                                style={{top: '10%', left: '5%'}}
                                width={1000}
                            >
                                <img
                                    alt="" width={1000} height={600}
                                    src={Img[screenType]}
                                />
                            </Modal>
                        </div>
                        <Divider />
                        <MoneyConfig
                            match={this.props.match} history={this.props.history}
                            detail={detail} screenType={screenType}
                        />
                    </Form>
                </Spin>
            </Card>
        );
    }
}

export default Form.create()(withRouter(BigScreenConfig));
